<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form :inline="true" :model="queryParams" ref="searchForm">
            <div class="search-form">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="queryParams.status"
                  @change="handleSearch"
                  class="m-2"
                  style="width:100px;"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in [
                      { value: 1, label: '启用中' },
                      { value: 0, label: '禁止中' }
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="是否老师" prop="teacherFlag">
                <el-select
                    v-model="queryParams.teacherFlag"
                    @change="handleSearch"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 1, label: '是' },
                      { value: 0, label: '否' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="是否作者" prop="authorFlag">
                <el-select
                    v-model="queryParams.authorFlag"
                    @change="handleSearch"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 2, label: '申请中' },
                      { value: 1, label: '是' },
                      { value: 0, label: '否' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="类型" prop="vipFlag">
                <el-select
                    v-model="queryParams.vipFlag"
                    @change="handleSearch"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 1, label: '普通' },
                      { value: 2, label: '天会员' },
                      { value: 3, label: '周会员' },
                      { value: 4, label: '月会员' },
                      { value: 5, label: '季度会员' },
                      { value: 6, label: '年会员' },
                      { value: 7, label: 'SVIP' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="是否禁止" prop="forbidden">
                <el-select
                    v-model="queryParams.forbidden"
                    @change="handleSearch"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 1, label: '是' },
                      { value: 0, label: '否' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="性别" prop="male">
                <el-select
                    v-model="queryParams.male"
                    @change="handleSearch"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 1, label: '男' },
                      { value: 0, label: '女' },
                      { value: 2, label: '否' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="角色" prop="status">
                <el-select
                    v-model="queryParams.role"
                    @change="handleSearch"
                    class="m-2"
                    style="width:100px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 'admin', label: '管理员' },
                      { value: 'normal', label: '普通' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="uuid：" prop="keyword">
                <el-input v-model="queryParams.uuid" style="width: 120px" placeholder="用户编号..." maxlength="100" clearable />
              </el-form-item>
              <el-form-item label="请输入：" prop="keyword">
                <el-input v-model="queryParams.keyword" placeholder="请输入姓名，昵称，手机..." maxlength="100" clearable />
              </el-form-item>
              <el-form-item>
                <el-button
                  style="padding: 16px !important"
                  type="primary"
                  :loading="tableLoading"
                  @click.prevent="handleSearch"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button style="padding: 16px !important" @click.prevent="handleReset">重置</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="draggable">
          <div  style="margin-bottom: 10px; display: flex; justify-content: space-between">
            <div>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加用户</el-button>
              <el-button type="danger" icon="Delete" v-if="selectIds.length > 0" @click="handleBatchDels">批量回收站</el-button>
            </div>
            <div>
              <el-button type="danger" icon="Delete" @click="handleOpenRecycle">
                回收站
              </el-button>
            </div>
          </div>
          <el-table
            ref="tableRef"
            v-loading="tableLoading"
            :data="tableData"
            border
            row-key="id"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
            height="calc(100vh - 340px)"
          >
            <el-table-column fixed type="selection" width="55"/>
            <el-table-column fixed label="用户ID"   width="180">
              <template v-slot="scope">
               <div class="flex align-center">
                 <img :src="scope.row.avatar" style="width: 30px;height: 30px;border-radius: 50%;"/>
                 <div class="ml15">用户编号：{{scope.row.id}}</div>
               </div>
              </template>
            </el-table-column>
            <el-table-column fixed label="用户名"  align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.userName" @blur="handleStatus(scope.row,'userName')"></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed label="昵称"  align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.nickName" @blur="handleStatus(scope.row,'nickName')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="用户性别" align="center" width="160">
              <template v-slot="scope">
                <el-select
                    v-model="scope.row.male"
                    @change="handleStatus(scope.row,'male')"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 1, label: '男' },
                      { value: 0, label: '女' },
                      { value: 2,label: '保密' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用户编号"  align="center" width="300">
              <template v-slot="scope">{{scope.row.uuid}}</template>
            </el-table-column>
            <el-table-column  label="学习币" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.coin" @blur="handleStatus(scope.row,'coin')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="职业" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.job" @blur="handleStatus(scope.row,'job')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="会员类型" align="center" width="160">
              <template v-slot="scope">
                <el-select
                    v-model="scope.row.vipFlag"
                    @change="handleStatus(scope.row,'vipFlag')"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 1, label: '普通' },
                      { value: 2, label: '天会员' },
                      { value: 3, label: '周会员' },
                      { value: 4, label: '月会员' },
                      { value: 5, label: '季度会员' },
                      { value: 6, label: '年会员' },
                      { value: 7, label: 'SVIP' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column  label="角色" align="center" width="160">
              <template v-slot="scope">
                <el-select
                    v-model="scope.row.role"
                    @change="handleStatus(scope.row,'role')"
                    class="m-2"
                    style="width:160px;"
                    placeholder="请选择"
                    clearable
                >
                  <el-option
                      v-for="item in [
                      { value: 'admin', label: '管理员' },
                      { value: 'normal', label: '普通' }
                    ]"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column  label="会员过期" prop="vipTime" align="center" width="160"></el-table-column>
            <el-table-column label="手机"  align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.telephone" @blur="handleStatus(scope.row,'telephone')"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="收货地址"  align="center" width="300">
              <template v-slot="scope">
                <el-input v-model="scope.row.address" @blur="handleStatus(scope.row,'address')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="省份" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.province" @blur="handleStatus(scope.row,'province')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="城市" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.city" @blur="handleStatus(scope.row,'city')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="职业" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.job" @blur="handleStatus(scope.row,'job')"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否绑定微信"  align="center" width="300">
              <template v-slot="scope">
                <span class="green" v-if="scope.row.openId">已绑定</span>
                <span class="red" v-else>未绑定</span>
              </template>
            </el-table-column>
            <el-table-column  label="文章数量" prop="bbsNum" align="center" width="160"></el-table-column>
            <el-table-column  label="学习课程" prop="courseNum" align="center" width="160"></el-table-column>
            <el-table-column  label="粉丝数量" prop="fansNum" align="center" width="160"></el-table-column>
            <el-table-column  label="关注数" prop="gzsNum" align="center" width="160"></el-table-column>
            <el-table-column label="创建时间" width="180" align="center">
              <template #default="scope">
                <span>{{ formatTimeToStr(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" width="180" align="center">
              <template #default="scope">
                <span>{{ formatTimeToStr(scope.row.updateTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column  label="真实姓名" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.realname" @blur="handleStatus(scope.row,'realname')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="身份证" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.idcard" @blur="handleStatus(scope.row,'idcard')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="支付宝" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.alipaycode" @blur="handleStatus(scope.row,'alipaycode')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="微信" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.weixincode" @blur="handleStatus(scope.row,'weixincode')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="银行卡号" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.bankcode" @blur="handleStatus(scope.row,'bankcode')"></el-input>
              </template>
            </el-table-column>
            <el-table-column  label="银行地址" align="center" width="160">
              <template v-slot="scope">
                <el-input v-model="scope.row.bankaddr" @blur="handleStatus(scope.row,'bankaddr')"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="是否作者"  width="200" align="center">
              <template #default="scope">
                <el-switch
                    v-model="scope.row.authorFlag"
                    @change="handleStatus(scope.row, 'authorFlag')"
                    :active-value="1"
                    active-color="#4caf50"
                    active-text="是"
                    inactive-text="否"
                    :inactive-value="0"
                >
                </el-switch>
                <span class="red" v-if="scope.row.authorFlag==2">（申请中）</span>
              </template>
            </el-table-column>
            <el-table-column label="是否老师"  width="180" align="center">
              <template #default="scope">
                <el-switch
                    v-model="scope.row.teacherFlag"
                    @change="handleStatus(scope.row, 'teacherFlag')"
                    :active-value="1"
                    active-color="#4caf50"
                    active-text="是"
                    inactive-text="否"
                    :inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column  label="介绍" align="center" width="300">
              <template v-slot="scope">
                <el-input v-model="scope.row.intro" @blur="handleStatus(scope.row,'intro')" type="textarea"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否发布"  width="180" align="center">
              <template #default="scope">
                <el-switch
                    v-model="scope.row.status"
                    @change="handleStatus(scope.row, 'status')"
                    :active-value="1"
                    active-color="#4caf50"
                    active-text="启用中"
                    inactive-text="已禁止"
                    :inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="是否禁用"  width="180" align="center">
              <template #default="scope">
                <el-switch
                    v-model="scope.row.forbidden"
                    @change="handleStatus(scope.row, 'forbidden')"
                    :active-value="1"
                    active-color="#4caf50"
                    active-text="拉黑中"
                    inactive-text="激活中"
                    :inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200">
              <template #default="scope">
                <el-button icon="edit" type="primary" @click.stop="handleEdit(scope.row)">
                  编辑
                </el-button>
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="InfoFilled"
                  icon-color="#F90"
                  title="确定要删除此数据吗?"
                  @confirm="confirmEvent(scope.row)"
                >
                  <template #reference>
                    <el-button :disabled="scope.row.id==1"  icon="remove" type="danger"> 回收站 </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="kva-pagination-box center">
          <el-pagination
            :current-page="queryParams.pageNo"
            :page-size="queryParams.pageSize"
            :page-sizes="[100, 150, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </home-page-header>
      <add-members ref="addCategoryRef" @load="handleLodeData"></add-members>
      <recycle-bin ref="recycleRef" @load="handleLodeData"></recycle-bin>
    </div>
  </div>
</template>

<script setup>
  import KVA from '@/utils/kva.js'
  import { formatTimeToStr } from '@/utils/date.js'
  import AddMembers from './components/AddMembers.vue'
  import RecycleBin from './components/RecycleBin.vue'
  import {
    findPages,
    batchDels,
    delById,
    updateStatus
  } from '@/api/users/index.js'

  // 搜索属性定义
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 30,
    status: '',
    teacherFlag:'',
    authorFlag:'',
    vipFlag:'',
    forbidden:'',
    male:'',
    uuid:'',
    role:'',
    keyword: ''
  })

  // 定义响应式得列表数据容器
  const tableData = ref([])
  const tableLoading = ref(false)
  const pages = ref(0)
  const total = ref(0)
  const searchForm = ref({})
  // 批量删除
  const tableRef = ref({})
  const selectIds = ref([])
  // 编辑添加相关
  const addCategoryRef = ref({})
  const recycleRef = ref({})

  // 加载数据
  const handleLodeData = async () => {
    tableLoading.value = true
    const resp = await findPages(queryParams)
    tableLoading.value = false
    tableData.value = resp.data.records
    total.value = resp.data.total * 1
    pages.value = resp.data.pages * 1
  }

  // 打开回收站
  const handleOpenRecycle = () => {
    recycleRef.value.handleOpen()
  }

  // 搜索
  const handleSearch = () => {
    queryParams.pageNo = 1
    handleLodeData()
  }

  // 改变行颜色
  const tableRowClassName = ({ row, rowIndex }) => {
    if (row.loadmore == 1) {
      return 'hot-row'
    }
    return ''
  }

  // 重置
  const handleReset = () => {
    searchForm.value.resetFields()
    handleSearch()
  }

  // 分页size更改
  const handleSizeChange = (size) => {
    queryParams.pageSize = size
    handleLodeData()
  }

  // 分页pageNo更改
  const handleCurrentChange = (pno) => {
    queryParams.pageNo = pno
    handleLodeData()
  }

  // 添加事件
  const handleAdd = () => {
    addCategoryRef.value.handleOpen()
  }

  // 编辑
  const handleEdit = (row) => {
    addCategoryRef.value.handleOpen(row.id)
  }

  // 删除
  const handleDel = async (row) => {
    const opid = row.id
    await delById(opid)
    KVA.notifySuccess('删除成功!')
    handleLodeData()
  }

  const confirmEvent = async (row) => {
    await handleDel(row)
  }

  /**
   * 选择删除的元素
   * @param rows
   */
  const handleSelectionChange = (rows) => {
    selectIds.value = rows.map((c) => c.id).filter(c=>c != "1")
  }

  // 更新状态
  const handleStatus = async (row, field) => {
    try {
      const res = await updateStatus(row.id, field, row[field])
      if (res.code == 20000) {
        KVA.notifySuccess('操作成功!')
        handleLodeData()
      }
    } catch (e) {
      console.log(e)
    }
  }


  /**
   * 批量加入回收站
   */
  const handleBatchDels = () => {
    if (selectIds.value && selectIds.value.length == 0) {
      KVA.notifyError('请选择一个项进行操作！')
      return
    }

    KVA.confirm('警告', '<strong>您确定要执行此次【批量加入回收站】操作吗？</strong>', { icon: 'success' }).then(
      async () => {
        const ids = selectIds.value.join(',')
        await batchDels(ids)
        KVA.notifySuccess('批量恢复成功!')
        handleLodeData()
      }
    )
  }

  onMounted(async () => {
    await handleLodeData()
  })


</script>
<style>
  .el-table .hot-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }

  .diffBtn {
    --el-button-bg-color: #ff8310;
    --el-button-border-color: #ff8310;
  }
  .diffBtn:hover {
    --el-button-hover-border-color: #ff8310 !important;
    --el-button-hover-bg-color: #ff8310 !important;
  }
  .el-table tr td:nth-last-child(1) .cell {
    padding: 0;
  }
</style>
